<template>
  <div class="page">
    <el-page-header @back="goBack" content="通知公告"></el-page-header>
    <div 
    class="m-t-20">
    <el-table
      stripe
      style="margin-top: 5px;"
      :data="tableData"
      height="calc(100vh - 250px)"
      header-row-class-name="liststyle2"
    >
      <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
      <el-table-column prop="title" label="标题" show-overflow-tooltip  min-width="250px"></el-table-column>
      <el-table-column prop="subType" label="分类"></el-table-column>
      <el-table-column prop="createTime" label="发布时间"></el-table-column>
      <!-- <el-table-column label="操作" width="80px">
        <template slot-scope="scope">
          <el-button type="text" @click="gotoPage(`/article/${scope.row.id}`)">查看</el-button>
        </template>
      </el-table-column> -->
      <template #empty>
        <el-empty description="暂无数据"></el-empty>
      </template>
    </el-table>
    <!--工具条-->
    <el-pagination
      background
      class="main-body-table-page m-t-10"
      layout="total, prev, pager, next, jumper"
      @current-change="handleCurrentChange"
      :current-page="search.current"
      :page-size="search.size"
      :total="search.total"
    ></el-pagination>
  </div>
  </div>
</template>

<script>
import { SelectPage } from '@/api/admin/article'
export default {
  props: ['id', 'current'],
  data() {
    return {
      search: {
        current: 1,
        size: 20,
        total: 0,
        title: ''
      },
      tableData: []
    }
  },
  mounted() {
    if (this.current) {
      this.search.current = this.current * 1
      this.search.total = this.current  * this.search.size
    }
    this.loadData()
  },
  methods: {
    goBack() {
      this.$router.go(-1)
    },
    gotoPage(path) {
      this.$router.push({ path: path })
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.$router.replace({  
          path: '/articleList',  
          query: { ...this.$route.query, current: val }  
          // 注意：这里使用了展开运算符(...)来合并现有的query参数和新参数  
          // 如果你只想更新某些参数，确保只包含那些需要更新的参数  
        });  
      this.loadData()
    },
    searchHandle() {
      this.search.current = 1
      this.loadData()
    },
    loadData() {
      console.log('this.search', this.search)
      SelectPage(this.search)
        .then((res) => {
          console.log('success:', res)
          this.tableData = res.data.records
          this.search.total = res.data.total
        })
        .catch((err) => {
          console.log('err:', err)
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.page {
  background-color: #fff;
  padding: 30px 50px;
  box-sizing: border-box;
}
</style>